<template>
  <div class>
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="95px"
      :rules="rules"
      ref="owner"
      class="demo-ruleForm"
      :model="owner"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主ID">
              <el-input v-model="owner.ownerId" placeholder="请先创建业主与单号后填写" disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名" prop="ownerName">
              <el-input v-model="owner.ownerName"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="联系方式" prop="ownerPhone">
              <el-input v-model="owner.ownerPhone"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="初始密码" >
              <el-input v-model="owner.ownerPw" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="区域">
              <el-input v-model="owner.ownerArea"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="栋" prop="ownerDong">
              <el-input v-model="owner.ownerDong"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="单元" prop="ownerUnit">
              <el-input v-model="owner.ownerUnit"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="室" prop="ownerRoom">
              <el-input v-model="owner.ownerRoom"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="住房面积" prop="ownerHome">
              <el-input v-model="owner.ownerHome"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费单号" >
              <el-input v-model="owner.propFId" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="水费单号" >
              <el-input v-model="owner.waterFId" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="电费单号" >
              <el-input v-model="owner.eleFId" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="燃气费单号" >
              <el-input v-model="owner.gasFId" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="车辆管理单" >
              <el-input v-model="owner.manageCarId" disabled placeholder="请先创建业主与单号后填写"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item class="limitdiv">
        <el-button type="primary" @click="submitForm('owner')">立即创建</el-button>
        <el-button type="primary" @click="turnback" plain>取消</el-button>
        <!-- <el-button @click="resetForm('owner')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      owner: {
        ownerId: "",
        ownerName: "ownerName",
        ownerPhone: "13195562622",
        ownerPw: "",
        ownerHome: "ownerHome",
        ownerArea: "0",
        ownerDong: "",
        ownerUnit: "",
        ownerRoom: "",
        manageCarId: "",
        waterFId: "",
        eleFId: "",
        gasFId: "",
        propFId: ""
      },
      rules: {
        ownerId: [
          { required: true, message: "请输入初始密码", trigger: "blur" }
        ],
        ownerName: [
          { required: true, message: "请输入访客姓名", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "请输入访客联系方式", trigger: "blur" },
          {
            pattern:
              "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\\d{8}$",
            message: "仅支持中国大陆手机号"
          }
        ],
        ownerPw: [
          { required: true, message: "请输入初始密码", trigger: "blur" }
        ],
        ownerHome: [
          { required: true, message: "请输入住房面积", trigger: "blur" },
          {pattern:'^\\d*$',message:'请输入数字！'}
        ],
        ownerArea: [],
        ownerDong: [
          { required: true, message: "请输入楼栋号", trigger: "blur" },
          { pattern: "^[1-9]*$", message: "请输入非零数字！" }
        ],
        ownerUnit: [
          { required: true, message: "请输入单元号", trigger: "blur" },
          { pattern: "^[1-9][0-9]*$", message: "请输入非零数字！" }
        ],
        ownerRoom: [
          { required: true, message: "请输入房间号", trigger: "blur" },
          { pattern: "^[1-9][0-9]*$", message: "请输入非零数字！" }
        ],
        manageCarId: [],
        waterFId: [
          { required: true, message: "请输入水费单号", trigger: "blur" }
        ],
        eleFId: [
          { required: true, message: "请输入电费单号", trigger: "blur" }
        ],
        gasFId: [
          { required: true, message: "请输入燃气费单号", trigger: "blur" }
        ],
        propFId: [
          { required: true, message: "请输入物业费单号", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios.post("owner/saveowner",this.owner)
          .then(res => {
            if(res.data=='success'){
              this.$router.push('/index_manager/ownerhead')
            }
            console.log(res)
          })
          .catch(err => {
            console.error(err); 
          })
          console.log(this.owner); //访客数据
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback() {
      this.$router.push("/index_manager/ownerhead");
    }
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px; /**角度圆滑*/
  min-height: 36px; /**高度 */
  text-align: center; /**居中显示 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
